<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
      label-position="left">
      <div class="title-container">
        <h3 class="title">物业管理系统登录</h3>
      </div>

      <el-form-item prop="username">
        <el-input ref="username" v-model="loginForm.username" placeholder="请输入用户名" name="username" type="text"
          tabindex="1" auto-complete="on" class="input-field" />
      </el-form-item>

      <el-form-item prop="password">
        <el-input ref="password" v-model="loginForm.password" placeholder="请输入密码" name="password" type="password"
          tabindex="1" auto-complete="on" class="input-field" />
      </el-form-item>

      <el-form-item prop="phone">
        <el-input :key="loginForm.phone" ref="phone" v-model="loginForm.phone" placeholder="请输入手机号" name="phone"
          tabindex="2" auto-complete="on" class="input-field" />
      </el-form-item>

      <el-form-item prop="code" class="code-form-item">
        <el-input ref="code" v-model="loginForm.code" id="code" placeholder="验证码" name="code" type="text" tabindex="1"
          auto-complete="on" @keyup.enter.native="handleLogin" class="input-field code-input" />
        <el-button type="primary" class="get-code-button" @click="getIndex">获取验证码</el-button>
      </el-form-item>

      <el-button :loading="loading" type="primary" class="login-button"
        @click.native.prevent="handleLogin">登录</el-button>

      <div class="tips">
        <span>用户名: admin</span>
        <span> 密码: 任意</span>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import { validUsername } from '@/utils/validate'
import { getCode } from "@/api/user";

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('用户名格式不正确'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 4) {
        callback(new Error('密码长度不能小于4位'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: '',
        phone: '',
        code: '',
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      this.passwordType = this.passwordType === 'password' ? '' : 'password'
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      console.log(this.loginForm, "登录")
      this.loading = true
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || '/' })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getIndex() {
      console.log(this.loginForm, "获取验证码")
      getCode(this.loginForm.phone).then(res => {
        console.log(res, "验证码")
        this.$message.success('验证码发送成功')
      }).catch(err => {
        console.log(err, "验证码失败")
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: flex-start;
  /* 左对齐 */
  align-items: center;
  height: 100vh;
  padding-left: 1100px;
  /* 调整登录框的位置，使其在兔子右边 */
  background: url('https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif') no-repeat center center fixed;
  background-size: cover;
}

.login-form {
  padding: 40px 30px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  width: 100%;
}

.title-container {
  text-align: center;
  margin-bottom: 30px;
}

h3.title {
  font-size: 24px;
  color: #333;
}

.el-form-item {
  margin-bottom: 20px;
}

.input-field {
  background-color: #f9f9f9;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  transition: border-color 0.3s;

  &:focus {
    border-color: #409eff;
    box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
  }
}

.code-form-item {
  display: flex;
  align-items: center;

  .el-input {
    flex: 1;
    margin-right: 10px;
  }

  .code-input {
    margin-right: 10px;
  }

  .get-code-button {
    height: 100%;
    background-color: #67c23a;
    border-color: #67c23a;

    &:hover {
      background-color: #50b62c;
      border-color: #50b62c;
    }
  }
}

.login-button {
  width: 100%;
  margin-bottom: 30px;
  height: 40px;

  &:hover {
    background-color: #409eff;
    border-color: #409eff;
  }
}

.tips {
  text-align: center;
  font-size: 12px;
  color: #999;
}
</style>
